<template>
    <div class="myself-root">
        <div class="personage-h"></div>
        <div class="login-box">
            <div class="qiandao">
                <img src="/img/main-img/my/sign-in.png" >
            </div>
            <div class="portrait-box"></div>
            <div class="login-text"><a href="">登录/注册</a></div>
        </div>
        <!-- 我的订单 -->
        <div class="order-box">
           <div class="order-top">
                <div class="order-box-left"><span>我的订单</span></div>
            <div class="order-box-right">
                <a href="#">
                    <span class="or-text">查看全部</span>
                    <img class="or-img" src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
           </div>
           <div class="order-bottom">
               <!-- 待付款 -->
               <div class="orbox">
                   <a href="#">
                       <img class="orb-img" src="/img/main-img/my/资源1.png">
                       <span class="orb-txt">待付款</span>
                   </a>                   
               </div>
                <!-- 待发货 -->
               <div class="orbox">
                   <a href="#">
                       <img class="orb-img" src="/img/main-img/my/资源3@2x-8.png">
                       <span class="orb-txt">待发货</span>
                   </a>                   
               </div>
                <!-- 待收货 -->
               <div class="orbox">
                   <a href="#">
                       <img class="orb-img" src="/img/main-img/my/资源4@2x-8.png">
                       <span class="orb-txt">待收货</span>
                   </a>                   
               </div>

                <!-- 评价 -->
               <div class="orbox">
                   <a href="#">
                       <img class="orb-img" src="/img/main-img/my/资源5@2x-8.png">
                       <span class="orb-txt">评价</span>
                   </a>                   
               </div>
                    <!-- 售后 -->
               <div class="orbox">
                   <a href="#">
                       <img class="orb-img" src="/img/main-img/my/资源6@2x-8.png">
                       <span class="orb-txt">售后</span>
                   </a>                   
               </div>

           </div>
        </div>

        <!-- 会员 -->
        <div class="member-box">
            <div class="member-le">
                <img src="/img/main-img/my/资源8@2x-8.png">
                <span>会员中心</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
        </div>

        <!-- 优惠，收藏，足迹，反馈-->
        <div class="bottom-root">
            <!-- 优惠 -->
            <div class="bottom-box">
                <div class="member-le">
                <img src="/img/main-img/my/资源9@2x-8.png">
                <span class="oneself">优惠券</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
            </div>
            <!-- 收藏 -->
             <div class="bottom-box">
                <div class="member-le">
                <img src="/img/main-img/my/资源10@2x-8.png">
                <span class="oneself">收藏</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
            </div>
            <!-- 足迹 -->
             <div class="bottom-box">
                <div class="member-le">
                <img src="/img/main-img/my/资源11@2x-8.png">
                <span class="oneself">足迹</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
            </div>
            <!-- 反馈 -->
             <div class="bottom-box">
                <div class="member-le">
                <img src="/img/main-img/my/资源12@2x-8.png">
                <span class="oneself">反馈</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
            </div>
            <!-- 设置 -->
             <div class="bottom-box">
                <div class="member-le">
                <img src="/img/main-img/my/资源13@2x-8.png">
                <span class="oneself">设置</span>
            </div>
            <div class="member-ri">
                <a href="#">
                    <img src="/img/main-img/my/right-arrows.png">
                </a>
            </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  components: {}
};
</script>

<style scoped>
.myself-root {
  overflow: hidden;
  background-color: rgb(241, 241, 241);
  margin-bottom: 15vw;
}
.personage-h {
  position: absolute;
  top: -55vw;
  left: -25vw;
  width: 150vw;
  height: 100vw;
  background-color: rgb(109, 219, 201);
  border-bottom-right-radius: 70vw;
  border-bottom-left-radius: 70vw;
}
.login-box {
  position: relative;
  width: 90vw;
  height: 40vw;
  border-radius: 2vw;
  background-image: url("/img/main-img/my/login.png");
  margin: 20vw auto 0;
  background-size: 100% 100%;
}
.portrait-box {
  display: inline-block;
  width: 28vw;
  height: 28vw;
  border-radius: 50%;
  box-shadow: 0 0 3vw 0.5vw #2edbc1 inset;
  margin: 3vw 4vw 0 1vw;
}
.login-text {
  margin: 0;
  position: relative;
  left: -2vw;
  top: -9vw;
  display: inline-block;
  width: 40vw;
}
.login-text a {
  text-decoration: none;
  color: #666666;
  font-size: 7vw;
}
.qiandao {
  width: 10vw;
  height: 10vw;
  position: absolute;
  right: 4vw;
  top: 4vw;
}
.qiandao img {
  width: 100%;
}
.order-box {
  margin-top: 3vw;
  background-color: white;

  padding: 2vw 3vw;
}
.order-top {
  /* border: 1px solid black; */
  display: flex;
  justify-content: space-between;
}
.order-box-left span {
  color: rgb(102, 102, 102);
  font-size: 5vw;
}
.order-box-right a {
  line-height: 6vw;
}
.or-text {
  font-size: 3vw;
  color: rgb(153, 153, 153);
  font-weight: 100;
  vertical-align: middle;
}
.or-img {
  width: 1.5vw;
  vertical-align: middle;
}
.order-bottom {
  display: flex;
  justify-content: space-between;
  margin-top: 4vw;
}
.orbox {
  text-align: center;
  width: 15vw;
}
.orb-img {
  width: 9vw;
  height: 9vw;
}
.orb-txt {
  margin-top: 1vw;
  color: rgb(102, 102, 102);
  font-size: 3.5vw;
}
.member-box {
  height: 15vw;
  margin-top: 5vw;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
}

.member-le img {
  width: 9vw;
  vertical-align:middle;
}
.member-le span {
  font-size: 5vw;
  color: rgb(102, 102, 102);
  margin-left: 2vw;
  text-shadow: 0.5vw 0.5vw 1vw #cccccc;
}
.member-ri img {
  width: 4vw;
  height: 5vw;
}
.bottom-root{
    margin-top: 6vw;
}
.bottom-box{
  height: 15vw;
  margin-top: 1.5vw;
  background-color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 5vw;
}
.oneself{
    position: relative;
    top: 1.5vw;
}
</style>